<template>
  <view class="h-screen bg-gray-50">
    <!-- 顶部导航栏 -->
    <view class="fixed top-0 left-0 right-0 bg-white z-50">
      <view class="flex items-center justify-between px-4 h-12 border-b border-gray-100">
        <view class="w-6">
          <text class="icon-remind text-gray-600"></text>
        </view>
        <view class="flex-1 flex justify-center gap-8">
          <text class="text-gray-500">关注</text>
          <text class="text-blue-500 font-medium border-b-2 border-blue-500">推荐</text>
          <text class="text-gray-500">同城</text>
        </view>
      </view>
    </view>

    <!-- 内容区域 -->
    <scroll-view
      scroll-y
      class="h-full pt-12"
      enable-flex
      :scroll-top="scrollTop"
      @scroll="onScroll"
    >
      <view v-for="post in posts" :key="post.id" class="bg-white mb-2 p-4">
        <!-- 用户信息 -->
        <view class="flex justify-between items-start">
          <view class="flex gap-3">
            <image :src="post.avatar" class="w-10 h-10 rounded-full bg-gray-200" />
            <view>
              <view class="flex items-center gap-1">
                <text class="font-medium">{{ post.username }}</text>
                <text :class="post.gender === 'male' ? 'text-blue-400' : 'text-pink-400'">
                  {{ post.gender === 'male' ? '♂' : '♀' }}
                </text>
              </view>
              <view class="text-gray-500 text-sm">{{ post.location }}</view>
            </view>
          </view>
          <view class="p-1">
            <text class="iconfont icon-more text-gray-600"></text>
          </view>
        </view>

        <!-- 帖子内容 -->
        <view class="mt-3">
          <text class="text-gray-700">{{ post.content }}</text>
          <view v-if="post.image" class="mt-3">
            <image :src="post.image" class="w-full rounded-lg" mode="widthFix" />
          </view>
        </view>

        <!-- 互动栏 -->
        <view class="flex justify-between mt-4">
          <view class="flex items-center gap-1">
            <text class="icon-share text-gray-500"></text>
            <text class="text-gray-500">{{ post.shares }}</text>
          </view>
          <view class="flex items-center gap-1">
            <text class="icon-message-comments text-gray-500"></text>
            <text class="text-gray-500">{{ post.comments }}</text>
          </view>
          <view class="flex items-center gap-1">
            <text class="icon-good text-gray-500"></text>
            <text class="text-gray-500">{{ post.likes }}</text>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
const posts = [
  {
    id: 1,
    username: '匿名用户',
    avatar: 'https://i.pinimg.com/736x/37/f8/2d/37f82d5a37d07f1abb4f31f2daeacb9f.jpg',
    gender: 'male',
    location: '90·重庆市·本科·学生',
    content: '来看看',
    image: 'https://miro.medium.com/v2/resize:fit:1400/0*mXZ0hAv9eJZZ_e4w.jpg',
    shares: 2,
    comments: 2,
    likes: 1,
  },
  {
    id: 2,
    username: '微信用户',
    avatar: 'https://img.cehca.com/uploadimg/image/20191218/20191218114705_79755.jpg',
    gender: 'female',
    location: '92·北京市·本科·IT互联网',
    content: '来体验一下',
    shares: 0,
    comments: 0,
    likes: 0,
  },
  // 可以添加更多假数据...
]
import { ref } from 'vue'
const scrollTop = ref(0)

const onScroll = (e) => {
  // scrollTop.value = e.detail.scrollTop
}

// 引入 uni-icons 组件
// import uniIcons from '@dcloudio/uni-ui/lib/uni-icons/uni-icons.vue'
</script>

<style scoped>
::-webkit-scrollbar {
  display: none;
  width: 0 !important;
  height: 0 !important;
  -webkit-appearance: none;
  background: transparent;
}
</style>
